// Annotator////////////////////////////////////////
// yangbo
!function($, window) {

	"use strict";

	window.Tyre.Annotator={
		entries:[],
		index:0,
		next:function(){
			this.index++;
			if(this.index+1>=this.entries.length) {
				this.index=this.entries.length-1;
			}
			var a=this.entries[this.index];
			if(a) {
				a.show();
			}
		},
	    show:function(){
			this.entries[this.index].show();
		},
		prev:function(){
			this.index--;
			if(this.index<=0) {
				this.index=0;
			}
			var a=this.entries[this.index];
			if(a) {
				a.show();
			}
		}
	};

	var Annotator = function(element, options) {
		this.$element = $(element);
		if(this.$element.size()==0){
			return
		}
		this.options = $.extend({}, $.fn.annotator.defaults, this.$element.data(), options);
		this.init();
	};

	Annotator.prototype = {

		constructor : Annotator,
		index: 0,
		init : function() {
			this.index=window.Tyre.Annotator.entries.length;
			window.Tyre.Annotator.entries[this.index]=this;
			if(!this.$element.attr('id')) {
				this.$element.attr('id',"__annotator"+this.index);
			}
		},
		intval:function (v) {
			v = parseInt(v);
			return isNaN(v) ? 0 : v;
		},
		getPos:function (e) {
			var l = 0;
			var t  = 0;
			var w = this.intval(e.style.width);
			var h = this.intval(e.style.height);
			var wb = e.offsetWidth;
			var hb = e.offsetHeight;
			while (e.offsetParent){
				l += e.offsetLeft + (e.currentStyle?this.intval(e.currentStyle.borderLeftWidth):0);
				t += e.offsetTop  + (e.currentStyle?this.intval(e.currentStyle.borderTopWidth):0);
				e =  e.offsetParent;
			}
			l += e.offsetLeft + (e.currentStyle?this.intval(e.currentStyle.borderLeftWidth):0);
			t += e.offsetTop  + (e.currentStyle?this.intval(e.currentStyle.borderTopWidth):0);
			t = t-50;
			if(t<0)t=0;
			return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
		},
		getScroll:function ()
		{
			var d=document;
			var t=0, l=0, w=0, h=0;
			if (d.documentElement && d.documentElement.scrollTop) {
				t = d.documentElement.scrollTop;
				l = d.documentElement.scrollLeft;
				w = d.documentElement.scrollWidth;
				h = d.documentElement.scrollHeight;
			} else if (d.body) {
				t = d.body.scrollTop;
				l = d.body.scrollLeft;
				w = d.body.scrollWidth;
				h = d.body.scrollHeight;
			}
			return { t: t, l: l, w: w, h: h };
		},
		scroller:function (el, duration) {
			if(typeof el != 'object') { el = document.getElementById(el); }
			if(!el) return;
			var z = window.Tyre.Annotator;
			if(z.timer && z.timer!=null) {
				window.clearInterval(z.timer);
			}
			z.el = el;
			z.p = this.getPos(el);
			z.s = this.getScroll();
			z.clear = function(){window.clearInterval(z.timer);z.timer=null;};
			z.t=(new Date).getTime();
			z.step = function(){
			var t = (new Date).getTime();
			var p = (t - z.t) / duration;
			if (t >= duration + z.t) {
				z.clear();
				window.setTimeout(function(){z.scroll(z.p.y, z.p.x);},13);
			} else {
				var st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
				var sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
				z.scroll(st, sl);
			}
			};
			z.scroll = function (t, l){window.scrollTo(l, t);};
			z.timer = window.setInterval(function(){z.step();},13);
		},
		position:function(){

				var _=window.Tyre.Annotator;
				$('#snapshot').css('display','none');
				var m_top=this.$element.offset().top;
				var m_height=this.$element.innerHeight();
				var m_width=this.$element.innerWidth();
				var w_width=document.body.scrollWidth;
				var h2=$(document).height();
				var padding=0;
				
				var l = this.$element.offset().left-padding;
				if(l<0) l=0;
				var w = this.$element.width()+padding;
				if(w>w_width) w=w_width;
				var r = w_width-(this.$element.offset().left+m_width);
				if(r<0) r=0;
				_.middleElement
					.css('top',m_top-padding+"px")
					.css('height',m_height+padding+"px")
					.css('left',l+"px")
					.css('width',w+"px");
				_.middleLeft
					.css('top',m_top-padding+"px")
					.css('left','0px')
					.css('height',m_height+padding+"px")
					.css('width',l+"px");
				_.middleRight
					.css('top',m_top-padding+"px")
					.css('height',m_height+padding+"px")
					.css('left',this.$element.offset().left+m_width+"px")
					.css('width',r+"px");
				
				var h = this.$element.offset().top-padding;
				if(h<0) h = 0;
				_.top
					.css('height',h+"px")
					.css('width',w_width);
				_.bottom
					.css('top',this.$element.offset().top-padding+m_height+padding+"px")
					.css('left','0px')
					.css('height',(h2-(this.$element.offset().top+m_height))+"px")
					.css('width',w_width+"px");
				$('#snapshot').css('display','block');
				
				// content
				var left=this.$element.offset().left+m_width+padding;
				var top=m_top-padding;
				var cpadding=20;
				if(left+_.tips+cpadding>w_width) {
					left=this.$element.offset().left-_.tips-20;
					top=top+padding;
				}
				if(top+_.content.height()>h2) {
					top=this.$element.offset().top-_.content.height()+m_height-cpadding-padding;
					top=top-padding;
				}
				if(left<0) {
					left=this.$element.offset().left+m_width-padding;
					top=top+m_height-padding;
					if(left+_.tips+cpadding>w_width) {
						left=this.$element.offset().left+m_width-_.tips-cpadding-padding;
						top=top+padding;
					}
					if(top+_.content.height()+cpadding>=h2) {
						top=this.$element.offset().top-_.content.height()-cpadding;
						top=top-padding;
					}
				}
				_.content.css('top',top+"px").css('left',left+"px");
				
				// scroll
				this.scroller(this.$element.attr('id'),500);
				
		},
		create:function(){

			var _=window.Tyre.Annotator;
			_.index=0;

			var bg='background-color:#000;opacity:0.4;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);';
			var sd='-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 20px rgba(0, 0, 0, 1);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 20px rgba(0, 0, 0, 1);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 20px rgba(0, 0, 0, 1);';

			_.snapshot=$('<div id="snapshot" aria-hidden="true" style="z-index:10000000;"></div>');
			_.annotator=$('<div id="annotator" style="position:absolute;top:0;left:0;z-index:10000000;"></div>');
			// _.close=$('<div title="关闭" class="close"
			// style="width:20px;height:20px;color:#fff;z-index:10000001;position:fixed;padding:10px;right:0px;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);">×</div>');

			_.top=$('<div t=t style="position:absolute;'+bg+'left:0px;top:0px;width:100%;height:78px;"></div>');
			_.bottom=$('<div t=b style="position:absolute;'+bg+'left:0px;width:100%;top:239px;"></div>');

			_.middle=$('<div t=m></div>');
			_.middleLeft=$('<div t=mL style="position:absolute;'+bg+'left:0px;float:left;"></div>');
			_.middleRight=$('<div t=mR style="position:absolute;'+bg+'float:left;left:496px;width:100%;"></div>');

			_.middleElement=$('<div t=mC style="'+sd+'border:1px solid #000;position:absolute;background-color:transparent;float:left;"></div>');
			
			_.middle.append(_.middleLeft);
			_.middle.append(_.middleElement);
			_.middle.append(_.middleRight);
			
			// _.annotator.append(_.close);
			_.annotator.append(_.top);
			_.annotator.append(_.middle);
			_.annotator.append(_.bottom);
			
			_.snapshot.append(_.annotator);

			
			_.tips=300;
			_.content=$('<div class="__nextP " style="'+sd+'border:1px solid #000;background-color:#fcf8e3;width:'+_.tips+'px;height:auto;color:#000;z-index:10000001;position:absolute;padding:10px;right:0px;"></div>');
			_.annotator.append(_.content);

			// var that=this;
			// _.close.bind('click',function(){
			// that.hide();
			// })

			$(document.body).prepend(_.snapshot);

		},
		show:function() {

				var get=$('#snapshot').size()>0;
				var _=window.Tyre.Annotator;

				if(!get) {
					this.create();
					$(document.body).bind('resize',function(){alert();});
					$(window).on('resize.annotator',function(){
						_.entries[_.index].position();
					});
					$(document).on('click.annotator',function(e){
						if(e) {
							if($(e.target).closest('.__nextP').length > 0
								||
								$(e.target).closest(_.entries[_.index].$element).length > 0
								||
								$(e.target)[0] == _.entries[_.index].$element[0]
							) {
								return
							}
						}
						_.entries[_.index].hide();
					});
				}

				_.content.html('');
				_.content.append(this.options.html);
				var next = "";
				if(this.index == 0 && _.entries.length > 1) {
					next=$('<div style="text-align:right;margin:10px;margin-bottom:0;"><a class="btn btn-small btn-primary" href="javascript:Tyre.Annotator.next();">下一项</a></div>');
				}
				else if(_.entries.length<=this.index+1) {
					
					 if(_.entries.length == 1) {
						 next=$('<div style="text-align:right;margin:10px;margin-bottom:0;"></div>');
						 var ok=$('<a class="btn btn-small btn-success" href="javascript:;">确认</a>');
						 var that=this;
						 ok.click(function(){
							that.hide();
						 });
						 next.append(ok);
					 } else {
						 next=$('<div style="text-align:right;margin:10px;margin-bottom:0;"><a class="btn btn-small btn-primary" href="javascript:Tyre.Annotator.prev();">上一项</a>&nbsp;&nbsp;</div>');
						 var ok=$('<a class="btn btn-small btn-success" href="javascript:;">确认</a>');
						 var that=this;
						 ok.click(function(){
							that.hide();
						 });
						 next.append(ok);
					 }
				} else {
					next=$('<div style="text-align:right;margin:10px;margin-bottom:0;"><a class="btn btn-small btn-primary" href="javascript:Tyre.Annotator.prev();">上一项</a>&nbsp;&nbsp;<a class="btn btn-small btn-primary" href="javascript:Tyre.Annotator.next();">下一项</a></div>');
				}

				_.content.append(next);

				this.position();



		},
		hide:function() {
			var _=window.Tyre.Annotator;
			_.index=0;
			_.snapshot.remove();
			$(window).off('resize.annotator');
			$(document).off('click.annotator');
		}
		
	};
	/* PLUG IN********************** */

	var old = $.fn.annotator;

	$.fn.annotator = function(option) {
		return this
				.each(function() {
					var $this = $(this), data = $this.data('annotator'), options = typeof option == 'object'
							&& option;
					if (!data)
						$this.data('annotator', (data = new Annotator(this, options)));
					
					if (typeof option == 'string')
						data[option]();
				});
	};

	$.fn.annotator.Constructor = Annotator;

	$.fn.annotator.defaults = {
		clazz:'',
		position:'left',
		html:''
	};

	$.fn.annotator.noConflict = function() {
		$.fn.indicator = old;
		return this;
	};

}(window.jQuery, window);

